<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>OJG模型加载</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        .tccDraw{
            width: 100%;
            height: 800px;
        }
    </style>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/stats.min.js"></script>
    <script src="js/OBJLoader.js"></script>
    <script src="js/MTLLoader.js"></script>
</head>

<body>
    <input type="button" class="big" value="放大" onclick="zoomOut()" style="float: right;">
    <div id="tccDraw" class="tccDraw">
    </div>
    <script>
        let scene, camera, renderer, labelRenderer, controls, showDiv, directionalLight,mesh,stats;
        /* 场景 */
        function initScene() {
            showDiv = document.getElementById("tccDraw");
            scene = new THREE.Scene();
            let axesHelper = new THREE.AxesHelper(500);
            scene.add(axesHelper);
        }
        /* 相机 */
        function initCamera() {
            //透视相机
            camera = new THREE.PerspectiveCamera(45, showDiv.clientWidth / showDiv.clientHeight, 10, 15000);
            camera.position.set(0, 500, 350);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
        }

        /* 渲染器 */
        function initRender() {
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(showDiv.clientWidth, showDiv.clientHeight);
            showDiv.appendChild(renderer.domElement);
        }

        /* 灯光 */
        function initLight() {
            let ambientLight = new THREE.AmbientLight(0xCCCCCC);
            scene.add(ambientLight);
            directionalLight = new THREE.DirectionalLight(0x585858);
            directionalLight.position.set(0, 3500, 0);
            scene.add(directionalLight);
        }

        /* 控制器 */
        function initControls() {
            controls = new THREE.OrbitControls(camera, showDiv);
        }
        /* 初始化性能插件status */
        function initStats(){
            stats = new Stats();
            document.body.appendChild(stats.dom);
        }
        /*添加OBJ模型*/
        function addOBJ(){
            var OBJLoader = new THREE.OBJLoader();//obj加载器
            var MTLLoader = new THREE.MTLLoader();
            MTLLoader.load("models/dt/dt.mtl",function(materials){
                OBJLoader.setMaterials(materials);
                OBJLoader.load("models/dt/dt.obj",function(obj){
                var object = obj;
                object.scale.set(30,30,30);
                scene.add(object);
            });
            })
        }
        /*按钮控制场景放大*/
        function zoomOut(){
            console.log("触发了场景放大的方法");
            controls.zoomIn();
        }
        initScene();
        initCamera();
        initLight();
        initControls();
        initRender();
        initStats();
        addOBJ();
        animate();
        /* 循环渲染 */
        function animate() {
            stats.update();
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
            controls.update();
        }
    </script>
</body>

</html>